<template>
    <div class="vcreateplugins">
        <h2>自定义插件</h2>
        <div class="hr"></div>
        <el-tag effect="dark">作用</el-tag>
        <p class="decr">
            往Vue上添加属性和方法，实现某些全局功能。<br>
            如果Vue上已经存在的属性和方法，就用Vue.xxx的方式来定义<br>
            如果Vue上还不存在这种属性和方法，就把属性和方法添加到Vue的原型上。即Vue.prototype.xxx = ...<br>
        </p>
        <div class="hr"></div>
        <el-tag effect="dark">操作方法</el-tag>
        <p class="decr">
            1. 在/src下创建plugins.js文件，在文件里添加属性和方法。<br>
            2. 在/src/main.js中引入，并Vue.use(plugins)使用自定义插件。<br>
            3. 在各个组件里，可以直接像使用Vue自带的属性和方法一样使用这些自定义插件。<br>
        </p>
        <div class="hr"></div>
        <el-tag effect="dark">Demo</el-tag>
        <p class="decr">
            使用已经定义好的自定义插件：<br>
        </p>
        <p class="decr">
            查看mydata1的值：<br>
            {{mydata1}}<br>
        </p>
        <p class="decr">
            <el-button @click="myFn">点击触发自定义插件的方法</el-button>
        </p>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            type="success"
            >
            <a :href="getHref" target="_blank">查看示例代码</a>
        </el-tag>
    </div>
</template>

<script>
import mixinPage from './mixin-page';

export default {
    name: 'Vcreateplugins',
    mixins: [mixinPage],
}
</script>

<style lang="less" scoped>
@import '../assets/css/mixin-frame.less';
</style>